<template>
  <modal v-model="value" @click.self.native="clickModal">
    <div class="select-singer-wrapper" :class="{show: value}">
      <div class="title">选择歌手</div>
      <ul class="singer-list">
        <li class="item" v-for="item in singers" :key="item.id" @click="select(item)">
          <icon-svg icon-class="geshou"/>{{item.name}}
        </li>
      </ul>
    </div>
  </modal>
</template>

<script>
import modal from 'components/modal'

export default {
  name: 'selectSinger',
  props: {
    singers: {
      type: Array,
      default () {
        return []
      }
    },
    value: {
      type: Boolean,
      required: true
    }
  },
  methods: {
    select (singer) {
      this.$emit('select', singer)
    },
    clickModal () {
      this.$emit('modal')
    }
  },
  components: { modal }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";
  @import "~common/style/mixins.less";

  .select-singer-wrapper {
    max-height: 60vh;
    padding: 12px 0;
    position: fixed;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: scale(0.2) translateY(-50%);
    background: @color-base;
    overflow-y: scroll;
    transition: transform .3s;
    .border-radius(12px);
    .singer-list {
      .item {
        padding: 6px 12px;
        text-align: left;
      }
      .item:active { background: @color-background }
    }
    .title {
      padding-left: 20px;
      padding-bottom: 12px;
      text-align: left;
      font-size: @font-size-large;
      font-weight: bold;
    }
  }
  .select-singer-wrapper.show {
    transform: scale(1) translateY(-50%);;
  }
</style>
